<!DOCTYPE html>
<html>
<head>
    <title>Bilibili专栏Markdown工具 - DOM to Image</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.10.0/github-markdown.css">
    <!--
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<style>
      body {
        padding-top: 20px;
        padding-bottom: 20px;
    }
  -->
    </style>
</head>
<body class="markdown-body">

<!--
<canvas id="canvas" style="border:2px solid black;"  width="800" height="800">
-->
<div>
  <canvas id="canvas" style="border:2px solid black;"  width="800" height="800">
  </canvas>
</div>
<table id="t">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
</div>
</div>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js">
  </script>
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js">
  </script>
  <script src="https://cdn.bootcss.com/marked/0.3.19/marked.min.js">
  </script>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var t = document.getElementById('t');

//var data = '<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800">' +
var data = '<svg xmlns="http://www.w3.org/2000/svg">' +
           '<foreignObject width="100%" height="100%">' +
           '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:20px">' +
             '<em>I</em> like ' + t.innerHTML +
             '<span style="color:white; text-shadow:0 0 2px blue;">' +
             'cheese</span>' +
           '</div>' +
           '</foreignObject>' +
           '</svg>';
data = encodeURIComponent(data);
var img = new Image();
img.onload = function() {
  ctx.drawImage(img, 0, 0);
  console.log(canvas.toDataURL());

  canvas.toBlob(function(blob) {
     var newImg = document.createElement('img'),
     url = URL.createObjectURL(blob);

     newImg.onload = function() {
     // no longer need to read the blob so it's revoked
     URL.revokeObjectURL(url);
   };

   newImg.src = url;
   //document.body.appendChild(newImg);
   });
}
img.src = "data:image/svg+xml," + data;
function getCss(obj, attribute) {
	if(obj.currentStyle) {
		return obj.currentStyle[attribute];
    }
	else {
	    return window.getComputedStyle(obj,null)[attribute];
    }
}
</script>
</body>
</html>
